<template>
	<view class="box padding">
		<u-form labelPosition="left" :model="model1" :rules="rules" ref="uForm">
			<u-form-item label-width="100px" label="订单编号" prop="form.Nid" borderBottom ref="item1">
				<view class="right-text dsb">
					<button class="originInfo-btn" @tap="showOriginInfo = true">原信息</button><view >{{ model1.form.money }}元</view>
				</view>
			</u-form-item>

			<u-form-item label-width="100px" label="日期" borderBottom ref="item1">
				<view class="right-text">{{ model1.form.money }}元</view>
			</u-form-item>
			<!-- <u-datetime-picker mode="date" :show="showData" :showToolbar="false" v-model="model1.form.data"
				@confirm="selectData()" @cancel="showData = false"></u-datetime-picker> -->



			<u-form-item label-width="100px" label="类型" prop="form.sex" borderBottom ref="item1">
				<view class="right-text" style="color:#1890FF;">{{ model1.form.money }}元</view>
			</u-form-item>

			<u-form-item label-width="100px" label="销售员" prop="form.name" borderBottom ref="item1">
				<view class="right-text">{{ model1.form.money }}元</view>
			</u-form-item>

			<u-form-item label-width="100px" label="付款形式" prop="form.phone" borderBottom ref="item1">
				<view class="right-text" style="color:#FF0000;font-weight:600;">{{ model1.form.money }}元</view>
			</u-form-item>

			<u-form-item label-width="100px" label="生产人员" prop="form.producer" borderBottom ref="item1">

			</u-form-item>

			<view class="producePerson">
				
				<view>
					<u-avatar src="http://pic2.sc.chinaz.com/Files/pic/pic9/202002/hpic2119_s.jpg"></u-avatar>
				</view>
				<view>
					王师傅
				</view>
				<view>
					电话：18878781616
				</view>
			</view>

			<u-form-item label-width="100px" label="商品" prop="form.producer" borderBottom ref="item1">

			</u-form-item>
			<view class="goods-contaienr" v-for="(item,index) in 3" :key="index">
				<view class="goods-index">
					{{ index + 1  }}
				</view>
				<view class="goods-image">
					<!-- <u-image :showLoading="true" src="https://cdn.uviewui.com/uview/album/1.jpg" width="80px"
						height="80px"></u-image> -->

				</view>
				<view class="goods-info">
					
					<view class="top">
						<view class="name">
							老鹰卡钳GT403 钢
						</view>
						
					</view>
					<view class="content">
						<view>
							货号：GTD456774
						</view>
						<view>
							<span style="margin-right:20rpx">单位/对</span>
							<span>数量1</span>
						</view>
					</view>
					<view class="content">
						规格：80*30*0.12
					</view>

				</view>
			</view>

			<view style="margin-top:20rpx;border-bottom: 1px solid #d6d7d9;">
				<view>
					备注
				</view>
				<view style="padding:40rpx">
					fldjalkjklfdsaj
				</view>
			</view>

			<u-form-item borderBottom label-width="90px" label="邮寄方式">
				<view class="right-text">{{ model1.form.money }}元</view>
			</u-form-item>
			<u-form-item borderBottom label-width="90px" label="组装">
				<view class="right-text">{{ model1.form.money }}元</view>
			</u-form-item>
			
		</u-form>


			<!-- <view>
				全款转账截图
			</view>
			<view>
				<image v-for="(image, index) in imageList" :key="index" :src="image" @click="previewImage(index)"
					mode="aspectFill" style="width: 100px; height: 100px; margin: 10px;" />
			</view> -->
		<!-- </view> -->

		<u-modal :show="refuse" :closeOnClickOverlay="true" title="驳回" showCancelButton showConfirmButton @close="refuse = false" @confirm="confirm"
			ref="uModal">
			<view class="slot-content" style="width:100%">
				<textarea v-model="textValue" placeholder="请输入文本" class="textarea" auto-height
					show-confirm-bar="false"></textarea>
			</view>
		</u-modal>
		<u-modal v-model="showOriginInfo" :content="content" @confirm="showOriginInfo = false" title="原信息"></u-modal>
		<!-- <u-modal :show="showOriginInfo" @confirm="showOriginInfo = false" title="原信息" :content='content' ></u-modal> -->


		<view class="bottom-body" style="height:100px">
			<view class="bottom-container">
				<view style="gap:20px;padding:0 20px;display:flex;width:80%">
					<u-button type="warning">选配</u-button>
					<u-button type="primary">发货</u-button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			showOriginInfo:false,
			title:'标题',
			content:'uView的目标是成为uni-app生态最优秀的UI框架',
			refuse: false,
			showSex: false,//是否显示性别选择器
			showData: false,//是否显示日期选择器
			showProducer: false,//是否显示生产人员选择器
			imageList: ['https://cdn.uviewui.com/uview/album/1.jpg', 'https://cdn.uviewui.com/uview/album/2.jpg'],
			//当前的类型
			type: '无三大件定制',
			model1:{
				form:{
					money:21
				}
			},

			
			// u-radio-group的v-model绑定的值如果设置为某个radio的name，就会被默认选中
			radiovalue1: '无三大件定制',

			
			rules: {
				'form.Nid': {
					type: 'string',
					required: true,
					message: '请填写姓名',
					trigger: ['blur', 'change']
				},
				'form.data': {
					type: 'string',
					required: true,
					message: '请选择日期',
					trigger: ['blur', 'change']
				},
				'form.name': {
					type: 'string',
					required: true,
					message: '请填写姓名',
					trigger: ['blur', 'change']
				},
				'form.address': {
					type: 'string',
					required: true,
					message: '请填写地址',
					trigger: ['blur', 'change']
				},
				'form.phone': {
					type: 'string',
					required: true,
					message: '请填写手机号',
					trigger: ['blur', 'change']
				},
				'form.producer': {
					type: 'string',
					required: true,
					message: '请填写生产人',
					trigger: ['blur', 'change']
				},
				'form.goods': {
					type: 'string',
					required: true,
					message: '请填写商品',
					trigger: ['blur', 'change']
				},
				'form.goods': {
					type: 'string',
					required: true,
					message: '请上传转款截图',
					trigger: ['blur', 'change']
				},
				'form.load': {
					type: 'string',
					required: true,
					message: '请输入容量',
					trigger: ['blur', 'change']
				},
				'form.model': {
					type: 'string',
					required: true,
					message: '请输入车型',
					trigger: ['blur', 'change']
				},
				'form.proboard': {
					type: 'string',
					required: true,
					message: '请输入保护板',
					trigger: ['blur', 'change']
				},
				'form.deposit': {
					type: 'string',
					required: true,
					message: '请输入定金',
					trigger: ['blur', 'change']
				},




			},
			radio: '',
			switchVal: false
		};
	},
	methods: {
		//预览图片
		previewImage(index) {
			uni.previewImage({
				current: index,
				urls: this.imageList
			});
		},
		openDeleteGoods(i) {
			const _this = this
			//删除商品弹窗
			uni.showModal({
				title: '提示',
				content: '是否删除商品',
				// #ifdef APP-PLUS
				showCancel: false,
				// #endif
				success: (res) => {
					if (res.confirm) {
						console.log('用户点击确定');
						_this.deleteGoods(i)
					}
				}
			})
		},
		deleteGoods(i) {
			console.log('%c [ i ]-370', 'font-size:13px; background:pink; color:#bf2c9f;', i)
			//删除商品
			this.model1.form.goods.splice(i, 1)
		},
		//预览图片
		openImg() {
			let imgsArray = this.model1.form.imgurl.split(',');
			uni.previewImage({
				current: 0,
				urls: imgsArray,
			});
		},
		//删除图片弹窗
		openDeleteImg() {
			const _this = this
			//弹框确认是否删除图片
			uni.showModal({
				title: '提示',
				content: '是否删除转款截图',
				// #ifdef APP-PLUS
				showCancel: false,
				// #endif
				success: (res) => {
					if (res.confirm) {
						console.log('用户点击确定');
						_this.deleteImgUrl()
					}
				}
			})
		},
		//删除图片
		deleteImgUrl() {
			this.model1.form.imgurl = ''
		},
		//选择图片
		choosePhoto() {
			const _this = this;
			uni.chooseImage({
				count: 1, //最多可以选择的图片张数，默认9
				sourceType: ['album'], //album 从相册选图，camera 使用相机，默认二者都有。如需直接开相机或直接选相册，请只使用一个选项
				sizeType: ['original'],//original 原图，compressed 压缩图，默认二者都有
				success(res) {
					console.log('选择图片完成', res)
					// 调用上传图片的接口
					// _this.uploadPhoto(res.tempFilePaths);
					_this.model1.form.imgurl = res.tempFilePaths[0]
					console.log('%c [ res.tempFilePaths[0] ]-261', 'font-size:13px; background:pink; color:#bf2c9f;', res.tempFilePaths[0])
				},
				fail() {
					console.log('失败', err);
				},
				complete() {
					console.log('结束');
				},
			})
		},

		changeMoney() {
			console.log('%c [ e ]-195', 'font-size:13px; background:pink; color:#bf2c9f;', e)
			this.model1.form.ismoney = e
		},
		changePost() {
			console.log('%c [ e ]-195', 'font-size:13px; background:pink; color:#bf2c9f;', e)
			this.model1.form.post = e
		},
		changeAb(e) {
			console.log('%c [ e ]-195', 'font-size:13px; background:pink; color:#bf2c9f;', e)
			this.model1.form.isAssemble = e
		},
		selectProducer(e) {
			console.log('%c [ e ]-150', 'font-size:13px; background:pink; color:#bf2c9f;', e)
			this.showProducer = false
			this.model1.form.producer = e.value[0]
		},
		// groupChange(n) {
		// 	console.log('groupChange', n);
		// },
		radioChange(n) {
			console.log('radioChange', n);
			this.radiovalue1 = n
		},
		selectData(e) {
			this.showData = false;
			console.log('%c [ e ]-76', 'font-size:13px; background:pink; color:#bf2c9f;', e)
			//时间戳转日期
			let date = new Date(e.value)
			console.log('%c [ date ]-80', 'font-size:13px; background:pink; color:#bf2c9f;', date)

		},
		sexSelect(e) {
			this.model1.form.sex = e.name
			this.$refs.uForm.validateField('form.sex')
		},
	},
	onReady() {
		//如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
		this.$refs.uForm.setRules(this.rules)
	},
};
</script>

<style lang="scss" scoped>
.goods-index{
	margin-right: 20rpx;
    font-size: 20px;
    font-weight: 600;
}
.originInfo-btn{
	font-size: 12px;
margin-right: 10px;
}

.textarea {
	width: 100%;
	
	height: 200rpx !important;
	/* 文本域高度 */
	border: 1px solid #ccc;
	border-radius: 5px;
}
.textarea::placeholder {
	color: #ccc;
	margin-top: 20rpx;
	margin-left: 20rpx;
}

.bottom-container {
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 88px;
	box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.3);
	background: #ffffff;
	display: flex;
	justify-content: space-around;
	align-items: center;

}

.viewImage {
	margin-top: 20rpx;
	z-index: 999;
	display: flex;
	justify-content: space-between;
}

.right-text {
	font-weight:300;
	font-size: 16px;
	text-align: right;
}

.goods-contaienr {
	display: flex;
	align-items: center;
	width: 100%;
	justify-content: space-around;
	margin-top: 20rpx;
	border-bottom: 1px dashed #d6d7d9;

	.goods-image {
		width: 100px;
		margin-right: 20rpx;
		background: #ffffff;
	}

	.goods-info {
		width: 400px;
		height: 100px;
		display: flex;
		flex-direction: column;
		justify-content: space-around;

		.top {
			display: flex;
			justify-content: space-between;

			.name {
				font-size: 30rpx;
				font-weight: 800;
			}

			.price {
				font-size: 30rpx;
				font-weight: 800;
			}
		}

		.content {

			display: flex;
			justify-content: space-between;
			font-size: 24rpx;
			color: #979797;
		}
	}

}

.producePerson {
	margin-top: 20rpx;
	display: flex;
	align-items: center;
	justify-content: space-around;
}

.goodsImg {
	width: 50px;
	height: 50px;

	img {
		width: 100%;
		height: 100%;
		background-size: cover;
	}
}

.sumbit {
	width: 100%;
	height: 88px;
	text-align: center;
	color: #fff;
	background: #ffffff;
	display: flex;
	justify-content: center;
	flex-direction: column;
	align-items: center;

	.btn {
		width: 250px;
		height: 40px;
		background-color: #3C9CFF;
		color: #ffffff;
		text-align: center;
		line-height: 40px;
	}
}

.bgup {
	width: 174px;
	height: 300px;
	background: whitesmoke;
	position: relative;

	.guan {
		position: absolute;
		top: -20px;
		right: -20px;

	}

	img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}
}

.bg {
	text-align: center;
	width: 174px;
	height: 138px;
	background-image: url('');
	background-size: cover;


}

.zhuankuan {
	text-align: center;
}

.box {}

.switchtext {
	width: 50px;
	line-height: 25px;

}

.seebtn {
	width: 100px;
	height: 20px;
	padding: 4px;
	text-align: center;
	background: #3C9CFF;
	color: #fff;
	margin-top: 10px;
	border-radius: 4px;

}
</style>
